<template>
    <fieldset>
        <legend>二级联动</legend>
        省:
        <!-- <h1>{{ sel1 }}</h1> -->
        <select v-model="sel1" @change="provienceChange(sel1)">
            <option v-for="item in provience" :key="item.id" :value="item.id">{{ item.name }}</option>
        </select>
        市:
        <select v-model="sel2">
            <option v-for="item in citys" :key="item.id" :value="item.id">{{ item.name }}</option>
        </select>
    </fieldset>
</template>
<script>
import * as api from "@/api/select"
export default {
    data() {
        return {
            //省数据
            provience: [],
            //市数据
            citys: [],
            //选中省的id
            sel1: 1,
            //选中市的id
            sel2: ""
        }
    },
    mounted() {
        api.fetchData()
            .then(res => {
                console.log(res)
                this.provience = res;
                let pid = res[0].id;
                this.provienceChange(pid)
            })
    },
    methods: {
        provienceChange(pid) {
            console.log(pid)
            api.fetchCity(pid)
                .then(res => {
                    console.log(res)
                    this.citys = res;
                    if (res.length > 0) {
                        this.sel2 = res[0].id
                    }
                })
        }
    }
}
</script>
<style scoped>
select {
    width: 300px;
}
</style>